<!doctype html>
<html lang="en">
	<head>
		<!-- Required meta tags -->
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<!-- Bootstrap CSS -->
		<link rel="stylesheet" type="text/css" href="assets/lib/bootstrap/css/bootstrap.min.css" />
		<link rel="stylesheet" type="text/css" href="assets/lib/swiper/css/swiper-bundle.min.css" />
		<link rel="stylesheet" href="./assets/css/style.css">
		<title>首页</title>
	</head>
	<body>
		<div class="page-top w-100 bg-dark">
			<div class="container">
				<nav class="navbar navbar-expand-lg navbar-light  bg-dark">
					<div class="container-fluid ">
						<a class="navbar-brand text-white" href="#">听雨轩</a>
						<button class="navbar-toggler" type="button" data-bs-toggle="collapse"
							data-bs-target="#navbarText" aria-controls="navbarText" aria-expanded="false"
							aria-label="Toggle navigation">
							<span class="navbar-toggler-icon"></span>
						</button>
						<div class="collapse navbar-collapse" id="navbarText">
							<ul class="navbar-nav me-auto mb-2 mb-lg-0">
								<li class="nav-item">
									<a class="nav-link active text-secondary" aria-current="page" href="#">科技</a>
								</li>
								<li class="nav-item">
									<a class="nav-link text-secondary" href="#">娱乐</a>
								</li>
								<li class="nav-item">
									<a class="nav-link text-secondary" href="#">编程</a>
								</li>
							</ul>
							<span class="navbar-text p-2 text-secondary ">
								登录
							</span>
							<span class="navbar-text   text-secondary">
								注册
							</span>
						</div>
					</div>
				</nav>

			</div>
		</div>
		<div class="page-banner mt-4">
			<div class="container">
				<div class="swiper banner-box ">
					<div class="swiper-wrapper">
						<div class="swiper-slide">
							<img src="./assets/img/3.jpg" alt="">
							<div class="title">家电</div>
						</div>
						<div class="swiper-slide">
							<img src="./assets/img/2.jpg">
							<div class="title">洗衣液</div>
						</div>
						<div class="swiper-slide">
							<img src="./assets/img/1.jpg">
							<div class="title">京东支付</div>
						</div>
					</div>
					<!-- 如果需要分页器 -->
					<div class="swiper-pagination"></div>

					<!-- 如果需要导航按钮 -->
					<div class="swiper-button-prev"></div>
					<div class="swiper-button-next"></div>

				</div>
				<!-- Nav tabs -->
				<div class="page-3">
					<ul class="nav nav-tabs" id="myTab" role="tablist">
						<li class="nav-item" role="presentation">
							<a class="nav-link active" id="home-tab" data-bs-toggle="tab" href="#home" role="tab"
								aria-controls="home" aria-selected="true">个人中心</a>
						</li>
						<li class="nav-item" role="presentation">
							<a class="nav-link" id="profile-tab" data-bs-toggle="tab" href="#profile" role="tab"
								aria-controls="profile" aria-selected="false">网站公告</a>
						</li>

					</ul>

					<!-- Tab panes -->
					<div class="tab-content border border-top-0 ">
						<div class="tab-pane active" id="home" role="tabpanel" aria-labelledby="home-tab">
							<img src="./assets/img/avatar.jpg" class="img-thumbnail " alt="">
							<div class="button">
								<a href="./login.html"><button type="button" class="btn btn-primary btn-sm">立即登录</button></a>
								<a href=""><button type="button"
										class="btn btn-secondary btn-sm bg-white text-black">现在注册</button></a>

							</div>

						</div>
						<div class="tab-pane" id="profile" role="tabpanel" aria-labelledby="profile-tab">
							<div class="list-group">
							  <a href="#" class="item-2 list-group-item bg-info
							   " aria-current="true">
							    <div class="d-flex w-100 justify-content-between">
							      <h5 class="mb-1">桃花诗</h5>
							      <small>2022-03-06 16:37:01</small>
							    </div>
							    
							
							  </a>
							  <a href="#" class="item-2 list-group-item bg-info ">
							    <div class="d-flex w-100 justify-content-between ">
							      <h5 class="mb-1">江雪</h5>
							      <small class="text-muted">2022-03-06 16:39:48</small>
							    </div>
							    
							 
							  </a>
							  <a href="#" class="item-3 list-group-item ">
							    <div class="d-flex w-100 justify-content-between">
							      <h5 class="mb-1">登鹳雀楼</h5>
							      <small class="text-muted">2022-03-06 16:38:59</small>
							    </div>
							  
							  </a>
							</div>
						</div>

					</div>
				</div>



			</div>


		</div>
		<div class="event mt-4">
			<div class="container">
				<div class="card-group ">
					<div class="card">
						<img src="./assets/img/1.jpg" class="card-img-top" alt="...">
						<div class="card-body ">
							<h5 class="card-title">Card title</h5>
							<p class="card-text">This is a wider card with supporting text below as a natural lead-in to
								additional content. This content is a little bit longer.</p>
							<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
						</div>
					</div>
					<div class="card ps-3">
						<img src="./assets/img/1.jpg" class="card-img-top" alt="...">
						<div class="card-body">
							<h5 class="card-title">Card title</h5>
							<p class="card-text">This card has supporting text below as a natural lead-in to additional
								content.</p>
							<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
						</div>
					</div>
					<div class="card ps-3">
						<img src="./assets/img/1.jpg" class="card-img-top" alt="...">
						<div class="card-body">
							<h5 class="card-title">Card title</h5>
							<p class="card-text">This is a wider card with supporting text below as a natural lead-in to
								additional content. This card has even longer content than the first to show that equal
								height action.</p>
							<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
						</div>
					</div>
				</div>
				<div class="card-group ">
					<div class="card">
						<img src="./assets/img/1.jpg" class="card-img-top" alt="...">
						<div class="card-body ">
							<h5 class="card-title">Card title</h5>
							<p class="card-text">This is a wider card with supporting text below as a natural lead-in to
								additional content. This content is a little bit longer.</p>
							<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
						</div>
					</div>
					<div class="card ps-3">
						<img src="./assets/img/1.jpg" class="card-img-top" alt="...">
						<div class="card-body">
							<h5 class="card-title">Card title</h5>
							<p class="card-text">This card has supporting text below as a natural lead-in to additional
								content.</p>
							<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
						</div>
					</div>
					<div class="card ps-3">
						<img src="./assets/img/1.jpg" class="card-img-top" alt="...">
						<div class="card-body">
							<h5 class="card-title">Card title</h5>
							<p class="card-text">This is a wider card with supporting text below as a natural lead-in to
								additional content. This card has even longer content than the first to show that equal
								height action.</p>
							<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="page-bottom bg-dark">
			<div class="container ">
				<nav class=" bg-dark mt-5">

					<h1 class=" text-white fs-4 pt-4" href="#">友情链接</h1>


					<p class="d-flex justify-content-start pt-2  ">
						<a class="nav-link active  text-white pe-3  " aria-current="page" href="#">Active</a>
						<a class="nav-link  text-white pe-3" href="#">link</a>
						<a class="nav-link  text-white pe-3" href="#">link</a>
						<a class="nav-link disabled  text-white" href="#" tabindex="-1"
							aria-disabled="true">Disabled</a>
					</p>
					<p class="d-flex justify-content-end text-white  py-3 mb-0 ">
						COPYRIGHT(@)2023 mo8e5_3428-博客网站
					</p>

				</nav>
			</div>
		</div>


		<script src="assets/lib/bootstrap/js/bootstrap.bundle.min.js"></script>
		<script src="assets/lib/swiper/js/swiper-bundle.min.js"></script>
		<script>
			var mySwiper = new Swiper('.banner-box', {
				loop: true, // 循环模式选项
				// 如果需要分页器
				pagination: {
					el: '.swiper-pagination',
				},

				// 如果需要前进后退按钮
				navigation: {
					nextEl: '.swiper-button-next',
					prevEl: '.swiper-button-prev',
				},
				on: {
					init: function(swiper) {
						slide = this.slides.eq(0);
						slide.addClass('ani-slide');
					},
					transitionStart: function() {
						for (i = 0; i < this.slides.length; i++) {
							slide = this.slides.eq(i);
							slide.removeClass('ani-slide');
						}
					},
					transitionEnd: function() {
						slide = this.slides.eq(this.activeIndex);
						slide.addClass('ani-slide');

					},
				}
			});
		</script>

	</body>
</html>
